<template>
  <div class="all">
    <el-card>
      <!-- 搜索框 -->
      <div class='select'>
        <el-form ref='form' :model='selectInfo'>
          <el-form-item label='试卷类型:'>
            <el-input v-model="selectInfo.type" clearable></el-input>
          </el-form-item>
          <el-form-item label='考试所属班级:'>
            <el-select v-model='selectInfo.class' placeholder='请选择' clearable>
              <el-option v-for='(item, index) in classAll' :key='index' :label='item' :value='item'>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间：">
            <el-date-picker v-model='selectInfo.createDate' type='daterange' range-separator='至'
              :start-placeholder='startTimeInput' :end-placeholder='endTimeInput' @change='pick'>
            </el-date-picker>
          </el-form-item>
          <el-form-item label='创建人:'>
            <el-input v-model='selectInfo.createPerson'></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type='success' @click='sel'>查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 内容 -->
      <div>
        <el-table border style="width: 100%" :data="tableData.slice((currentPage-1)*PageSize,currentPage*PageSize)">
          <el-table-column prop="date" label="序号" width="fit:true">
          </el-table-column>
          <el-table-column prop="name" label="试卷类型" width="fit:true">
          </el-table-column>
          <el-table-column prop="class" label="考试所属班级" width="fit:true">
          </el-table-column>
          <el-table-column prop="date" label="应参加考试人数" width="fit:true">
          </el-table-column>
          <el-table-column prop="date" label="实际考试人数" width="fit:true">
          </el-table-column>
          <el-table-column prop="date" label="平均分" width="fit:true">
          </el-table-column>
          <el-table-column prop="date" label="及格人数" width="fit:true">
          </el-table-column>
          <el-table-column prop="date" label="创建时间" width="fit:true">
          </el-table-column>
          <el-table-column prop="date" label="创建人" width="fit:true">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">详情</el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页功能 -->
      <!-- <Pagination :total='total' :employee='employee' @getCurrentPage='getCurrentPage' @getPageSize='getPageSize'
        :currentPagex='currentPagex' /> -->
      <!-- 分页 -->
      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[5,10,15,20]" :page-size="5" layout="total, sizes, prev, pager, next" :total="12">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          class: '一班'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          class: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          class: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          class: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          class: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          class: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          class: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小',
          class: '上海市普陀区金沙江路 1516 弄'
        },
        {
          date: '2016-05-02',
          name: '王小',
          class: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小',
          class: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小',
          class: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小',
          class: '上海市普陀区金沙江路 1516 弄'
        }

      ],
      selectInfo: {
        type: '',
        class: '',
        createDate: '',
        createPerson: ''
      },
      classAll: ['一班', '二班', '三班'],
      // input: '',
      // input1:'',
      // input2:'',
      // input3:'',
      // input4:'',
      // input5:'',
      // value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      // 默认显示第一页
      currentPage: 1,
      // 默认每页显示的条数（可修改）
      PageSize: 5,
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      pageSizes: [1, 2, 3, 4],
      startTimeInput: '开始日期',
      endTimeInput: '结束日期'
    }
  },

  methods: {
    ...mapMutations(['setCurrentExam']),
    // datechange事件
    pick (value) {
      // console.log(value,'-------------');
      if (value == null) {
        // this.selectInfo.createDate = ''
        // this.selectInfo.empHirDates = ''
        // console.log(this.addEmployeeName, '333333333333');
        // this.selectPagination(this.addEmployeeName);
      }
    },
    // 详情
    handleEdit (index, row) {
      console.log(index, row)
      console.log(this.$router)
      // this.$router.push('gradeClass')
      this.setCurrentExam(row)
      this.$router.push({ name: 'gradeClass' })
      // this.$router.push({
      //   path: 'gradeClass',
      //   query: {
      //     class: row.class
      //   }
      // })
    },
    handleSizeChange (val) {
      this.PageSize = val
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      this.currentPage = val
      console.log(`当前页: ${val}`)
    },
    // 搜索功能
    sel () {

    },
    // 分页功能
    getData () {
      this.$api.info().then((res) => {
        console.log(res)
        // 渲染表格
        this.tableData = res.data.data
        // 获取数据长度
        this.totalCount = data.data.length
      })
    }

  }

}
</script>

<style scoped lang="less">
.all {
  margin-top: 20px;
  width: 80%;
  margin: 0 auto;
}

.select {
  .el-form {
    display: flex;
    justify-content: space-between;

    .el-form-item:nth-child(1) {
      /deep/.el-form-item__content {
        margin-left: 75px;
      }
    }

    .el-form-item:nth-child(2) {
      /deep/.el-form-item__content {
        margin-left: 100px;
      }
    }

    .el-form-item:nth-child(3) {
      /deep/.el-form-item__content {
        margin-left: 82px;
      }
    }

    .el-form-item:nth-child(4) {
      /deep/.el-form-item__content {
        margin-left: 60px;
      }
    }

    .el-input {
      width: 150px;
    }

    /deep/.el-input input {
      width: 150px;
    }
  }
}

::v-deep.el-pagination {
  text-align: center;
}
</style>
